﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jOrgChart - A jQuery OrgChart Plugin</title>
    <link rel="stylesheet" href="__APP__/Public/css/common.css" />
    <link rel="stylesheet" href="__APP__/Public/css/public02.css" />
    <link rel="stylesheet" href="__APP__/Public/js/tree/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__APP__/Public/js/tree/css/jquery.jOrgChart.css" />
    <link rel="stylesheet" href="__APP__/Public/js/tree/css/custom.css" />
    <link href="__APP__/Public/js/tree/css/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="__APP__/Public/js/tree/prettify.js"></script>
    <!-- jQuery includes -->
    <script type="text/javascript" src="__APP__/Public/js/tree/jquery.min.js"></script>
    <script type="text/javascript" src="__APP__/Public/js/tree/jquery-ui.min.js"></script>
    <link rel='stylesheet' href='__APP__/Public/css/jquery-ui.css' type='text/css'>
    <script src="__APP__/Public/js/tree/jquery.jOrgChart.js"></script>
    <script src="__APP__/Public/js/functions.js"></script>
    <style>
        logo
        {
            width: 814px;
            height: 32px;
            background: url(__APP__/Public/images/logo.png);
            display: inline-block;
            margin-top: 26px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="header">
        <a href="#" class="logo"></a>
    </div>
    <div class="container02">
        <div class="main">
 
            <br />
            <input id="addNode" type="button" value="{$Think.lang.add}" />
            <!-- <input id="editNode" type="button" value="{$Think.lang.edit}"/> -->
            <input id="delNode" type="button" value="{$Think.lang.del_node}" />
            <input type="button" value="{$Think.lang.goback}" onclick="goback('/Users/userProfile?uid={$encryptid}')" />
            	
	<ul id="org" style="display: none"><?php echo($tree);?></ul>      
            <div id="chart" class="orgChart">
            </div>
            <div id="genealogyInfoDialog" style="display: none;">
                <form id="form1" method="post">
                <input name='opt' type='hidden' value="{$opt}" />
                <input id='chickedNodeId' name='chickedNodeId' type='hidden' />
                <input id="uid" name="uid" type="hidden" value="{$encryptid}" />
               <table class="datalist">
    <tr>
        <td>
            {$Think.lang.firstname}:
        </td>
        <td>
            <input id="fname" name="fname" type="text" />
        </td>
    </tr>
    <tr>
        <td>
            {$Think.lang.lastname}:
        </td>
        <td>
            <input id="lname" name="lname" type="text" />
        </td>
    </tr>
    <tr>
        <td>
            {$Think.lang.secondname}:
        </td>
        <td>
            <input type="text" class="input02" name='secondname' />
        </td>
    </tr>
    <tr>
        <td>
            {$Think.lang.user_gender}:
        </td>
        <td>
            <select name="gender">
                <option value="0">{$Think.lang.female}</option>
                <option value="1" selected='selected'>{$Think.lang.male}</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            {$Think.lang.birthday}:
        </td>
        <td>
            <input id='birthday' name='birthday' readonly="readonly" type="text" class='input02' />
        </td>
    </tr>
    <tr>
        <td>
            {$Think.lang.deathday}:
        </td>
        <td>
            <input id='deathday' name='deathday' readonly="readonly" type="text" class='input02' />
        </td>
    </tr>
     <if condition="count($data) eq 0">
    <tr>
        <td>
            {$Think.lang.user_name_list}:
        </td>
        <td>
            <select id="Select1" name="nodeId">
                <option value='0' selected>{$Think.lang.empty}</option>
            </select>
        </td>
    </tr>
    <input type='hidden' name='relationship' />
    <else />
    <tr>
        <td>
            {$Think.lang.user_name_list}:
        </td>
        <td>
            <select id="node" name="nodeId">
                <foreach name="data" item="v">
						<option value="{$v.id}">{$v.name}</option>
					</foreach>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            {$Think.lang.relation}
        </td>
        <td>
            <select id="relationship" name="relationship">
                <option value="0">{$Think.lang.parent}</option>
                <option value="1" selected="selected">{$Think.lang.children}</option>
            </select>
        </td>
    </tr>
    </if>
</table>

                <input type='hidden' id="avatar" name='avatar' />
                <br />
                <input type="submit" value="      {$Think.lang.submit}      " class="contactbuttom" />
                </form>
            </div>
        </div>
    </div>
    <script>
        var chickedNodeId = '';
        $(function () {
            $("#org").jOrgChart({
                chartElement: '#chart',
                dragAndDrop: true,
                nodeClickCallback: function (node) {
                    $('.orgChart div').css('color', '#fff');
                    $(node).css('color', 'red');
                    chickedNodeId = $(node).attr('id');
                    $('#chickedNodeId').val(chickedNodeId);
                }
            });

            $("#addNode").click(function () {
                showDialog();
                $('#form1').attr('action', '__URL__/addGenealogy');
            });

            $('#delNode').click(function () {
                if (chickedNodeId == '') {
                    alert('{$Think.lang.pls_select_one}');
                    return false;
                }
                $.post('__URL__/deleteGenealogyChild', { id: chickedNodeId }, function (data) {
                    var obj = $.parseJSON(data);
                    if (obj.status == 0) {
                        alert('{$Think.lang.delete_failed}');
                    } else if (obj.status == 1) {
                        //alert('{$Think.lang.delete_success}');
                        location.href = '/Users/genealogy?uid={$encryptid}&opt={$opt}';
                    } else if (obj.status == 2) {
                    	alert('<?php addslashes($Think.lang.can_only_delete_child_node) ?>');
                    }
                });
            });

            $('#editNode').click(function () {

            });
        });

        function showDialog() {
            $('#genealogyInfoDialog').dialog({
                width: 600,
                height: 420,
                modal: false,
                title: "{$Think.lang.genealogy}",
                create: function () { },
                open: function () { },
                close: function () { }
            });

        }

        function getGenealogyData(id) {
            var url = "/Users/getGenealogyInfo";
            $.post(url, { id: id }, function (data) {
                var obj = $.parseJSON(data);
                if (obj.status == 1) {
                    setField(obj);
                }
            });
        }

        function setField(obj) {
            if (obj != null) {
                $('#fname').val(obj.data['firstname']);
                $('#lname').val(obj.data['lastname']);
            }
        }

        function finish() {
            location.href = "/Users/userProfile?uid={$encryptid}&opt={$opt}";
        }
	
    </script>
<include file="Public:footer" />
